import { ScrollView, View, Text, Image } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import moment from 'dayjs';

const flowState = (status) => {
  if (status == 1) {//电路故障
    return '电路故障';
  } else if (status == 2) {//自来水管故障
    return '自来水管故障';
  } else if (status == 3) {//供暖设备故障
    return '供暖设备故障';
  } else if (status == 4) {//家电维修
    return '家电维修';
  } else {//其他
    return '其他';
  }
};

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      detail: {}
    };
  }

  componentDidMount() {
    let detail = Taro.getStorageSync('repairDetail');
    this.setState({ detail })
  }

  componentDidShow() { }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  imgRender(imgList) {
    const imgLists = [];
    const urls = []
    imgList.map((item, index) => {
      urls.push(item.imageUrl)
      imgLists.push(
        <View>
          <Image
            className="img"
            key={item.imageUrl}
            onClick={this.onImageClick.bind(this, item, urls)}
            src={item.imageUrl}
          />
        </View>,
      );
    });
    return imgLists;
  }

  onImageClick = (item, urls) => {
    this.previewImage(item.imageUrl, urls);
  }

  previewImage = (img, files) => {
    Taro.previewImage({
      current: img, // 当前显示图片的http链接
      urls: files, // 需要预览的图片http链接列表
    });
  };

  render() {
    let { detail } = this.state;
    return (
      <ScrollView className="packageARepairDetail" scrollY>
        <View className='item_cont'>
          <Text className='item_name'>当前状态</Text>
          <Text className='item_name1' style={{ color: '#333' }}>{detail.statusEnum}</Text>
        </View>
        <View className='item_cont'>
          <Text className='item_name'>所属小区</Text>
          <Text className='item_name1'>{detail.communityName}</Text>
        </View>
        <View className='item_cont'>
          <Text className='item_name'>联系方式</Text>
          <Text className='item_name1'>{detail.alternatePhone}</Text>
        </View>
        <View className='item_cont'>
          <Text className='item_name'>报修时间</Text>
          <Text className='item_name1'>
            {moment(detail.createTime).format('YYYY-MM-DD')}
          </Text>
        </View>
        <View className='item_cont'>
          <Text className='item_name'>报修人昵称</Text>
          <Text className='item_name1'>
            {detail.reporter ? detail.reporter : '未知'}
          </Text>
        </View>
        <View className='item_cont'>
          <Text className='item_name'>报修类型</Text>
          <Text className='item_name1'>{flowState(detail.type)}</Text>
        </View>
        <View className='item_cont1'>
          <Text className='item_name'>报修描述</Text>
          <Text className='item_desc'>
            {detail.description}
          </Text>
        </View>
        {detail.status == 2 ? (
          <View className='item_cont2' style={{ borderBottomWidth: 0 }}>
            <Text className='item_name'>维修说明</Text>
            <Text className='item_desc'>
              {detail.repairResult}
            </Text>
          </View>
        ) : null}
        {detail.refImage && detail.refImage.length > 0 && (
          <View className='imgBox'>
            {this.imgRender(detail.refImage)}
          </View>
        )}
      </ScrollView>
    );
  }
}
